<template>
    <div class="exhibition-center">
        <heade style="overflow: hidden;"></heade>
        <!-- 具体内容 -->
        <div class="container">
            <!-- 轮播图 -->
            <div class="clearflx exhibition-center-content">
                <!-- banner左侧地点列表 -->
                <div class="left">
                    <div class="title">
                        <span class="text">热门展馆</span>
                        <span class="right-arrow">></span>
                    </div>
                    <div class="line"></div>
                    <div class="content">
                        <div class="content-title">按省份：</div>
                        <div class="content-list">
                            <div class="content-list-text" v-for="item in bannerCityList" :key="item.index" >
                                {{item.text}}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- banner左侧地点列表end -->
                <banner style="float:left;"></banner>
                <banner-right style="float:left;margin-left:9px;"></banner-right>
            </div>
            <!-- 轮播图end -->
            <!-- 内容 -->
            <div class="exhibition-center-list">
                <div class="list-title clearflx">
                    <span class="list-title-square left"></span>
                    热门展馆
                    <span class="list-title-square right"></span>
                    <div class="list-translate">popular exhibition hall</div>
                </div>
                <div class="list-content">
                    <div class="list-content-card" v-for="(item,index) in exhibitionHallList" :key="index" @click="toServideRrovider">
                        <img :src="item.img" alt class="img" />
                        <div class="text">{{item.name}}</div>
                        <div class="text">推荐指数：{{item.recommend}}</div>
                        <div class="text">联系电话：{{item.phone}}</div>
                        <div class="text">E-mail：{{item.email}}</div>
                        <div class="detail-bar">查看详情</div>
                    </div>
                </div>
                <!-- 更多按钮 -->
                <div class="check-more-box">
                    <div class="check-more-btn">查看更多</div>
                </div>
            </div>
        </div>
        <foot></foot>
    </div>
</template>
<script>
import heade from "@/components/header/header.vue";
import banner from "@/components/banner/banner.vue";
import bannerRight from "@/components/banner/banner_right.vue";
import foot from "@/components/footer/footer.vue";
export default {
    components: {
        heade,
        banner,
        bannerRight,
        foot
    },
    data() {
        return {
            bannerCityList: [
                { text: "北京(58)", link: "", index: "1" },
                { text: "上海(27)", link: "", index: "2" },
                { text: "天津(10)", link: "", index: "3" },
                { text: "重庆(9)", link: "", index: "4" },
                { text: "安徽(12)", link: "", index: "5" },
                { text: "福建(12)", link: "", index: "6" },
                { text: "广东(58)", link: "", index: "7" },
                { text: "广西(13)", link: "", index: "8" },
                { text: "贵州(4)", link: "", index: "9" },
                { text: "海南(4)", link: "", index: "10" },
                { text: "河北(15)", link: "", index: "11" },
                { text: "湖北(15)", link: "", index: "12" },
                { text: "吉林()", link: "", index: "13" },
                { text: "江苏(44)", link: "", index: "14" },
                { text: "江西(8)", link: "", index: "15" },
                { text: "浙江(32)", link: "", index: "16" },
                { text: "香港(3)", link: "", index: "17" },
                { text: "澳门(2)", link: "", index: "18" },
                { text: "辽宁(18)", link: "", index: "19" },
                { text: "内蒙古(8)", link: "", index: "20" },
                { text: "宁夏(1)", link: "", index: "21" },
                { text: "陕西(10)", link: "", index: "22" },
                { text: "四川(13)", link: "", index: "23" },
                { text: "西藏(1)", link: "", index: "24" },
                { text: "青海(2)", link: "", index: "25" },
                { text: "河南(13)", link: "", index: "26" },
                { text: "河北(15)", link: "", index: "27" }
            ],
            exhibitionHallList: [
                {
                    img: require("@/assets/exhibition-list.jpg"),
                    name: "宜宾市临港会展中心",
                    recommend: "80",
                    phone: "123456789",
                    email: "1234546"
                },
                {
                    img: require("@/assets/exhibition-list.jpg"),
                    name: "宜宾市临港会展中心",
                    recommend: "80",
                    phone: "123456789",
                    email: "1234546"
                },
                {
                    img: require("@/assets/exhibition-list.jpg"),
                    name: "宜宾市临港会展中心",
                    recommend: "80",
                    phone: "123456789",
                    email: "1234546"
                },
                {
                    img: require("@/assets/exhibition-list.jpg"),
                    name: "宜宾市临港会展中心",
                    recommend: "80",
                    phone: "123456789",
                    email: "1234546"
                },
                {
                    img: require("@/assets/exhibition-list.jpg"),
                    name: "宜宾市临港会展中心",
                    recommend: "80",
                    phone: "123456789",
                    email: "1234546"
                },
                {
                    img: require("@/assets/exhibition-list.jpg"),
                    name: "宜宾市临港会展中心",
                    recommend: "80",
                    phone: "123456789",
                    email: "1234546"
                },
                {
                    img: require("@/assets/exhibition-list.jpg"),
                    name: "宜宾市临港会展中心",
                    recommend: "80",
                    phone: "123456789",
                    email: "1234546"
                },
                {
                    img: require("@/assets/exhibition-list.jpg"),
                    name: "宜宾市临港会展中心",
                    recommend: "80",
                    phone: "123456789",
                    email: "1234546"
                },
                {
                    img: require("@/assets/exhibition-list.jpg"),
                    name: "宜宾市临港会展中心",
                    recommend: "80",
                    phone: "123456789",
                    email: "1234546"
                },
                {
                    img: require("@/assets/exhibition-list.jpg"),
                    name: "宜宾市临港会展中心",
                    recommend: "80",
                    phone: "123456789",
                    email: "1234546"
                }
            ]
        };
    },
    methods: {
        //跳转至服务商页
        toServideRrovider(){
            this.$router.push({ path:'/serviceProvider'})
        }
    },
};
</script>
<style lang="scss" scoped>
.exhibition-center {
    .exhibition-center-content {
        margin-top: 30px;
        margin-bottom: 30px;
        box-shadow: 0 5px 20px #ccc;
        .left {
            float: left;
            width: 224px;
            height: 425px;
            background-color: #404040;

            .title {
                height: 50px;
                line-height: 50px;
                font-size: 15px;
                color: #fff;
                padding: 0 19px 0 23px;
                .text {
                    float: left;
                }
                .right-arrow {
                    float: right;
                }
            }
            .line {
                background-color: #fff;
                height: 1px;
            }
            .content {
                box-sizing: border-box;
                padding: 0 23px;
                text-align: left;
                .content-title {
                    color: #fff;
                    font-size: 14px;
                    margin-top:20px;
                }
                .content-list {
                    .content-list-text {
                        width: 33.3%;
                        float: left;
                        cursor: pointer;
                        margin-top: 18px;
                        color: #fff;
                        font-size: 13px;
                    }
                    .content-list-text:hover{
                        color:rgb(200, 22, 34);
                    }
                }
            }
        }
    }
    // 内容列表
    .exhibition-center-list {
        // 头部标题
        .list-title {
            margin: 90px auto 56px;
            width: 253px;
            height: 54px;
            line-height: 54px;
            font-size: 30px;
            border-top: 1px solid rgb(200, 22, 34);
            border-bottom: 1px solid rgb(200, 22, 34);
            position: relative;

            .list-title-square {
                display: inline-block;
                width: 26px;
                height: 26px;
                margin-top: 14px;
                background-color: rgb(200, 22, 34);
                position: relative;
            }
            .list-title-square::before,
            .list-title-square::after {
                content: "";
                position: absolute;
                background-color: #fff;
            }
            .list-title-square::before {
                top: 48%;
                left: 0;
                width: 100%;
                height: 2px;
            }
            .list-title-square::after {
                left: 49%;
                top: 0;
                height: 100%;
                width: 2px;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .list-translate {
                font-size: 11px;
                position: absolute;
                bottom: -5px;
                left: 20%;
                background-color: #fff;
                height: 11px;
                line-height: 11px;
                width: 60%;
            }
        }
        // 列表
        .list-content {
            padding: 0 18px;
            display: flex;
            flex-wrap: wrap;
            .list-content-card {
                background-color: rgb(245, 244, 245);
                width: 224px;
                height: 339px;
                margin: 0 5px 36px 0;
                box-sizing: border-box;
                padding: 8px 10px;
                text-align: left;
                cursor: pointer;
                &:nth-child(5),
                &:nth-child(10) {
                    margin-right: 0;
                }
                .img {
                    width: 204px;
                    height:136px
                }
                .text {
                    font-size: 18px;
                    line-height: 28px;
                    color: rgb(132, 132, 132);
                }
                .detail-bar {
                    margin-top: 45px;
                    text-align: center;
                    position: relative;
                    font-size: 14px;
                    color: rgb(200, 22, 34);
                }
                .detail-bar::before {
                    content: "";
                    position: absolute;
                    top: -22px;
                    left: 22px;
                    width: 160px;
                    height: 3px;
                    background-color: rgb(200, 22, 34);
                }
                .detail-bar::after {
                    content: "";
                    position: absolute;
                    top: -19px;
                    left: 82px;
                    border-top: 19px solid rgb(200, 22, 34);
                    border-right: 19px solid transparent;
                    border-bottom: 19px solid transparent;
                    border-left: 19px solid transparent;
                }
            }
            .list-content-card:hover {
                background-color: rgb(200, 22, 34);
                .text,
                .detail-bar {
                    color: #fff;
                }
                .detail-bar::before {
                    background-color: #fff;
                }
                .detail-bar::after {
                    border-top: 19px solid #fff;
                }
            }
        }
        .check-more-box{
            margin:67px 0 39px;
            .check-more-btn{
                margin: 0 auto;
                width: 260px;
                height: 45px;
                line-height: 45px;
                border-radius: 30px;
                background-color: #c81622;
                font-size: 20px;
                color: #fff;
                cursor: pointer;
            }
        }
    }
}
</style>